<template>
    <el-row type="flex">
        <el-col :span="9"
            >现金(元)：<el-input v-model="cashModelValue" placeholder="请输入现金(元)"></el-input>
        </el-col>
        <el-col :span="9"
            >当前汇率：<el-input class="rate" v-model="exchangeRateModelValue" placeholder="请输入当前汇率"></el-input
            >HKD/CNY</el-col
        >
        <el-col :span="6">
            <div class="date">当前日期：{{ today }}</div>
        </el-col>
    </el-row>
</template>

<script lang="ts">
import {
    computed, defineComponent, onMounted, PropType,
} from 'vue';
import { format } from 'date-fns';
import { createNumberModelValueFactory } from '@/components/utils/useNumber';
import { getExchangeRate } from '@/components/utils/exchangeRate';

export default defineComponent({
    props: {
        date: {
            type: Date,
            required: true,
        },
        exchangeRate: {
            type: String,
            required: true,
        },
        cash: {
            type: String,
            required: true,
        },
    },
    setup(props, context) {
        const today = computed(() => format(props.date, 'yyyy-MM-dd'));
        const factory = createNumberModelValueFactory(props, context);
        const cashModelValue = factory.create('cash');
        const exchangeRateModelValue = factory.create('exchangeRate');
        onMounted(async () => {
            const exchangeRate = await getExchangeRate();
            exchangeRateModelValue.value = String((exchangeRate.USDCNY / exchangeRate.USDHKD).toFixed(6));
        });
        return {
            cashModelValue,
            exchangeRateModelValue,
            today,
        };
    },
});
</script>

<style lang="scss" scoped>
.el-input {
    width: 150px;
    &.rate {
        width: 100px;
        margin-right: 5px;
    }
}
.date {
    text-align: right;
    line-height: 40px;
}
</style>
